<template>
  <div class="logo">

  </div>
  <div class="scrollBarChartArea">
    <a-menu v-model:openKeys="openKeys" mode="inline" class="scrollbar" @select="selected">
      <a-sub-menu v-for="(permission) in permissions" :key="permission.permissionName">
        <template #title>
          <span>
            <user-outlined />
            {{ permission.displayName }}
          </span>
        </template>
        <a-menu-item v-for="(second) in permission.children" :key="second.permissionName">{{ second.displayName
        }}</a-menu-item>

      </a-sub-menu>

    </a-menu>
  </div>
</template>
<script setup lang="ts">
import store from '@/store';
import _ from 'lodash';
import type { StateAll } from '@/store'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {
  UserOutlined,
} from '@ant-design/icons-vue';
const router = useRouter();
//从vuex中获得权限数据
const permissions = (store.state as StateAll).users.permission;
//展开第一个
let openkey = [];
if (permissions.length) {
  openkey.push(permissions[0].permissionName);
}
const openKeys = ref<string[]>(openkey);

//根据权限数据动态添加router
permissions.map((permission) => {
  permission.children?.map((second) => {
    const secondName = second.permissionName;
    const secondRoute = {
      path: secondName,
      name: secondName,
      component: () => import('@/views/' + secondName + '/' + _.upperFirst(secondName) + '.vue')
    };
    router.addRoute('home',
      secondRoute
    );
  })
});
//选择左侧目录中的选项后跳到相应的功能
const selected = function ({ item, key, selectedKeys }) {
  let path = '/' + key;
  router.push({
    path
  });
}

// import _ from 'lodash'
// import { useRouter, useRoute } from 'vue-router';
// import type { RouteRecordName } from 'vue-router';
// import { useStore } from '@/store';

// const router = useRouter();
// const route = useRoute();
// const store = useStore();
// const permission = store.state.users.infos.permission;

// const menus = _.cloneDeep(router.options.routes).filter((v)=> {

//   v.children = v.children?.filter((v)=> v.meta?.menu && (permission as (RouteRecordName|undefined)[]).includes(v.name));

//   return v.meta?.menu && (permission as (RouteRecordName|undefined)[]).includes(v.name);
// })


</script>

<style>
.logo {
  background: yellow;
  height: 45px;
}

.scrollBarChartArea {
  border: 1px #eee solid;
  background: #fff;
  height: 650px;
  overflow: hidden auto;
}

.scrollbar {
  height: 100%;
  borderRight: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.scrollbar::-webkit-scrollbar {
  display: none;
}
</style>

